<template>
	<s-layout title="分销概况">
		<view class="white-card">
			<view class="title">
				佣金概况
			</view>
			<view class="card-content">
				<view>
					<text class="num">{{state.info.dshtx}}</text>
					<text>待审核提现(元)</text>
				</view>
				<view>
					<text class="num">{{state.info.dshtx || 0}}</text>
					<text>提现待打款(元)</text>
				</view>
				<view>
					<text class="num">{{state.info.ljyj || 0}}</text>
					<text>累计佣金(元)</text>
				</view>
				<view>
					<text class="num">{{state.info.txyj || 0}}</text>
					<text>提现佣金(元)</text>
				</view>
			</view>
		</view>
		<view class="white-card">
			<view class="title">
				分销商概况
			</view>
			<view class="card-content">
				<view>
					<text class="num">{{state.info.zcnums || 0}}</text>
					<text>分销商(人)</text>
				</view>
				<view>
					<text class="num">{{state.info.dshnums || 0}}</text>
					<text>待审核(人)</text>
				</view>
				<view>
					<text class="num">{{state.info.fxszb || 0}}</text>
					<text>分销商占比(%)</text>
				</view>
			</view>
		</view>
<!--		<view class="white-card">-->
<!--			<view class="tab-box">-->
<!--				<view :class="state.rankTab==1?'active-tab':''" @click="changeTab(1)">-->
<!--					佣金趋势-->
<!--				</view>-->
<!--				<view :class="state.rankTab==2?'active-tab':''" @click="changeTab(2)">-->
<!--					分销商趋势-->
<!--				</view>-->
<!--			</view>-->
<!--      <line-chart :data="state.chartInfo.left" :xAxis="state.chartDate" v-if="state.rankTab==1"/>-->
<!--      <line-chart :data="state.chartInfo.right" :xAxis="state.chartDate" v-else/>-->
<!--		</view>-->
	</s-layout>
</template>

<script setup>
	import LineChart from '../../component/linechart.vue';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
	} from "@dcloudio/uni-app"
	import sheep from '@/sheep';

  const state = reactive({
    info:{},
    rankTab: 1,
    chartInfo: {
      left:[0,1,2,3,4,3,2],
      right:[0,1,2,3,4,3,2]
    },
    chartDate:[1,2,3,4,5,6,7]
  })

  async function getInfo(){
    const res = await sheep.$mapi.distribution.profileData();
    if (!res.code) return;
    state.info = res.data;
  }

  function changeTab(value) {
    state.rankTab = value;
  }

  onLoad((options) => {
    getInfo();
  });
</script>

<style lang="scss" scoped>
	.white-card {
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 28rpx;
		padding: 28rpx;

		.title {
			position: relative;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			padding-left: 20rpx;

			&::before {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				content: "";
				width: 8rpx;
				height: 32rpx;
				background: #3A43FF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}

			>text {
				font-size: 24rpx;
				color: #666666;
				margin-left: 10rpx;
			}
		}

		.card-content {
			display: flex;
			flex-wrap: wrap;
			margin-top: 10rpx;

			>view {
				margin: 20rpx 0;
				width: 50%;
				display: flex;
				flex-direction: column;
				font-size: 25rpx;
				color: #6f6f6f;

				.num {
					font-weight: 500;
					font-size: 40rpx;
					color: #333333;
					margin-bottom: 18rpx;
				}

				.compare {
					margin-top: 10rpx;

					.add {
						color: #FF5050;
					}

					.reduce {
						color: #5AAE58;
					}
				}
			}
		}

		.tab-box {
			width: 388rpx;
			height: 66rpx;
			background: #F7F7F7;
			border-radius: 98rpx 98rpx 98rpx 98rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-around;

			>view {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-around;
				height: 100%;
				font-size: 26rpx;
				color: #333333;
			}

			.active-tab {
				background: #3A43FF;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				color: #fff;
			}
		}
	}
</style>
